<template>
  <router-link class="flex justify-between text-[#e54c5f]" to="/settings">
    <div class="flex items-center cursor-pointer">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <p class="pl-5">设置验证器应用</p>
    </div>
  </router-link>
  <div class="my-5">
    <el-alert
      title="什么是验证器应用？"
      type="info"
      description="您可以在手机或平板上使用Google Authenticator App生成实时的验证码。当您完成设置后，即使在离线模式下，您也可以通过该App收到实时验证码。"
      show-icon
      :closable="false"
    />
    <div class="flex my-10">
      <div class="w-44">二维码扫描</div>
      <div>
        <p>打开您的验证器应用</p>
        <p>1. 在应用内选择添加帐户</p>
        <p>2. 使用您移动设备的摄像头扫描下方二维码</p>
        <div>
          <img
            :src="qrcode"
            alt="Google Authenticator QR Code"
            style="width: 150px; height: 150px; margin-top: 30px"
          />
        </div>
      </div>
    </div>
    <div class="flex">
      <div class="w-44">手动添加密钥</div>
      <div>
        <p>除扫描二维码外，您也可以在身份验证器应用中手动填写验证密钥</p>
        <div class="flex items-center mt-5">
          <el-input v-model="input" disabled style="width: 240px" />
          <el-icon
            size="20"
            color="#e54c5f"
            class="ml-5 cursor-pointer"
            @click="copyToClipboard"
          >
            <CopyDocument />
          </el-icon>
        </div>
      </div>
    </div>
    <div class="flex" style="padding-top: 40px">
      <div class="w-44">输入验证码</div>
      <div>
        <el-input
          v-model="input_code"
          size="large"
          class="mb-10"
          style="width: 240px"
          placeholder="6位数字验证码"
        />
      </div>
    </div>
    <div class="flex">
      <div class="w-44"></div>
      <div>
        <el-button
          type="primary"
          class="w-60"
          size="large"
          @click="verifyAndActivate"
        >
          验证并激活
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
// 获取谷歌验证器密钥googleAuthSecretApi
// 绑定谷歌验证器bindGoogleAuthApi
// 校验google验证器checkGoogleAuthApi
// 打开google验证器选项openGoogleAuthApi
import {
  googleAuthSecretNewApi,
  bindGoogleAuthNewApi,
} from "@/api/gooleSettings/index";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const input = ref("");
const qrcode = ref("");
const input_code = ref("");
const copyToClipboard = () => {
  navigator.clipboard
    .writeText(input.value)
    .then(() => {
      showSuccessMessage("复制成功");
    })
    .catch((error) => {
      return false;
      //    console.error("复制失败: ", error);
    });
  const showSuccessMessage = (message) => {
    ElMessage({
      showClose: true,
      message: message,
      type: "success",
    });
  };
};
const getGoogleAuthSecret = async () => {
  try {
    const response = await googleAuthSecretNewApi();
    input.value = response.secret;
    qrcode.value = response.qrcode;
  } catch (error) {
    return false;
    //    console.error("请求谷歌验证器密钥失败: ", error);
  }
};
const fetchData = async () => {
  await Promise.all([getGoogleAuthSecret()]);
};
const verifyAndActivate = async () => {
  const code = input_code.value;
  //  console.log(code);
  try {
    const response = await bindGoogleAuthNewApi({ code });
    ElMessage({
      showClose: true,
      message: "设置成功",
      type: "success",
    });
    router.push("/settings");
  } catch (error) {
    return false;
  }
};
onMounted(() => {
  fetchData();
});
</script>
